import React from 'react';
import FixedCell from '../cell/fixed'
import TableView from '../index'

// import styles from './index.module.scss'

interface PropsInterface <T, K extends keyof T>{
  models: Array<T>,
  iconKey: string,
  titleKey: string,
  centerTextKey: string,
  bottomTextKey: string,
  keyName: K,
  cellClick: (item: any) => void
}

const FixedTableView = function<T, K extends keyof T>(props: PropsInterface<T, K>) {
  
  const cell = (model: T) => {
    return <FixedCell 
            onClick={ props.cellClick }
            titleKey={ props.titleKey } 
            bottomTextKey={ props.bottomTextKey } 
            item={ model } 
            iconKey={ props.iconKey } 
            key={ `${model[props.keyName]}` }  
            centerTextKey={ props.centerTextKey }
          />
  }

  return <TableView models={ props.models } cell={ cell }></TableView>
}

FixedTableView.defaultProps = {
  cellClick: () => {},
  keyName: '_id'
};

export default FixedTableView